<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background: red;
				
				transition: width 1s ; 
				/*transform-origin: 50% 50%;*/
			}
			/*div:hover{*/
				/*width: 300px;*/
				/*height: 300px;
				background: black;*/
				/*transform: rotate(1081deg);*/
				/*transform: translate(100% 50%);*/
				/*transform:skew(30deg,30deg);*/
				/*transform: scale(0.5,0.5);*/
			/*}*/
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			box.onclick = function(){
				this.style.width = 500 + 'px';
			}
			//动画结束调用的函数
			function run(){
				this.style.background = 'black';
				//监听完毕移除监听事件
				this.removeEventListener('transitionend',run,false);
			}
			//监听动画结束
			box.addEventListener('transitionend',run,false);
		</script>

		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
